<template>
    <div class="scrollbar" style="height: 650px;overflow: auto;">
        <div class="title" style="margin-bottom: 20px;">
            <div style="font-size: 16px;font-weight: 600">基础信息</div>
        </div>
        <div class="" style="margin-bottom: 20px;">
            <div class="flex" style="margin-bottom: 12px;">
                <div class="flex_1">模版名称：{{props.formData.name}}</div>
                <div class="flex_1">状态：<a-link :status="props.formData.status == 1 ?'success':'danger'">{{props.formData.status == 1 ?'启用':'停用'}}</a-link></div>
            </div>
            <div class="flex" style="margin-bottom: 12px;">
                <div class="flex_1">有效起止时间：{{props.formData.start_time}} ~ {{props.formData.end_time}}</div>
            </div>
            
        </div>
        <div class="title" style="margin-bottom: 20px;">
            <div style="font-size: 16px;font-weight: 600">价格政策</div>
        </div>
        <div style="margin-bottom: 20px;">
            <a-table :columns="priceColumns" :data="priceList" :pagination="false" :bordered="{wrapper: true, cell: true}">
                <template #weight_type="{record}">
                    <div>
                        {{ handleweightType(record.weight_type) }}
                    </div>
                </template>
                <template #billing_node="{record}">
                    <div>
                        {{ handlebillingNode(record.billing_node) }}
                    </div>
                </template>
                <template #is_checked="{record}">
                    <div>
                        {{ record.is_checked == 1?'生成':'不生成' }}
                    </div>
                </template>
                <template #price_config="{record}">
                    <div v-if="record.price_type == 17 || record.price_type == 20 || record.price_type == 12" style="width: 100%;">
                        <div v-for="(item,index) in record.price_config" :key="index">
                            <div v-if="item.transport_type == 1" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">集装箱：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <span v-for="(items,indexs) in item.jieti_data" :key="indexs" style="margin-right: 12px;">{{ items.box_size == 1?'20英尺':'40英尺' }}：{{items.range}}{{items.jieti_time == 1?'天':'小时'}}{{items.price}}元/{{handleunit(items.unit)}};</span> 
                                </div>
                            </div>
                            <div v-if="item.transport_type == 2" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">整车：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <span style="margin-right: 12px;" v-for="(items,indexs) in item.jieti_data" :key="indexs">{{items.range}}{{items.jieti_time == 1?'天':'小时'}}{{items.price}}元/{{handleunit(items.unit)}};</span> 
                                </div>
                            </div>
                            <div v-if="item.transport_type == 3" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">批量快运：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <span v-for="(items,indexs) in item.jieti_data" :key="indexs" style="margin-right: 12px;">{{items.range}}{{items.jieti_time == 1?'天':'小时'}}{{items.price}}元/{{handleunit(items.unit)}};</span> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else style="width: 100%;">
                        <div v-for="(item,index) in record.price_config" :key="index">
                            <div v-if="item.transport_type == 1" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">集装箱：</div>
                                <div v-if="item.is_goods != 1" class="flex_1" style="text-align: start;">
                                    <span v-for="(items,indexs) in item.box" :key="indexs" style="margin-right: 12px;">{{ items.box_size == 1?'20英尺':'40英尺' }}：{{items.price}}元/{{handleunit(items.unit)}};</span> 
                                </div>
                                <div v-else class=" ">按集装箱装卸费率计算;</div> 
                            </div>
                            <div v-if="item.transport_type == 2" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">整车：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <div v-if="item.is_goods != 1">{{item.price}}元/{{handleunit(item.unit)}};</div> 
                                    <div v-else>按品名装卸费率计算;</div> 
                                </div>
                            </div>
                            <div v-if="item.transport_type == 3" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">批量快运：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <div v-if="item.is_goods != 1">{{item.price}}元/{{handleunit(item.unit)}}； {{ item.limit_weight != ''?`不足 ${item.limit_weight} 吨，按此重量作为最低重量计费;`:'' }}</div> 
                                    <div v-else>按品名装卸费率计算;</div> 
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive,defineProps,onMounted } from "vue";
    import { Message } from '@arco-design/web-vue'
    import tool from '@/utils/tool'
    import commonApi from "@/api/common";
    import * as common from '@/utils/common'
    import { request } from "@/utils/request.js";
    const props = defineProps({
        formData: {
            default: {},
        },
    });
    const priceList = ref([])
    const goodsList = ref([])
    const addressList = ref([])
    const weightTypeList = ref([])
    const jifeiArr = ref([])
    const unitList = ref([])
    onMounted(()=>{
        // 价格列表
        console.log(999,props.formData)
        handlePriceList()
        commonApi.getDict("weight_type").then((res) => {
            let _data = res.data;
            _data.map((v,i)=>{
            v.value = v.key
            })
            weightTypeList.value = _data
        });
        commonApi.getDict("billing_node").then((res) => {
            jifeiArr.value = res.data;
        });
        request({
            url:'financial/unit/index',
            method: 'get',
            params:{
                openPage:false
            },
        }).then(res=>{
            unitList.value = res.data.items
        })
    })
    const handleweightType = (item)=>{
        let name = ''
        weightTypeList.value.map((v,i)=>{
            if(v.key == item){
            name = v.title
            }
        })
        console.log(name)
        return name
    }
    const handleunit = (item)=>{
        let name = ''
        unitList.value.map((v,i)=>{
            if(v.id == item){
            name = v.name
            }
        })
        return name
    }
    const handlebillingNode = (item)=>{
        let name = ''
        jifeiArr.value.map((v,i)=>{
            if(v.key == item){
            name = v.title
            }
        })
        return name
    }
    const handlePriceList = ()=>{
        request({
            url: 'system/templateDetail/index',
            method: 'get',
            params: {
                pageSize: 50,
                template_id:props.formData.id
            }
        }).then(res => {
            priceList.value = res.data.items
        })
    }
    const priceColumns = ref([
        {
            title: '费用名称',
            dataIndex: 'name',
            align:'center',
        },
        {
            title: '计费规则',
            dataIndex: 'price_config',
            width:800,
            align:'center',
            slotName:'price_config'
        },
        {
            title: '计费重量',
            dataIndex: 'weight_type',
            align:'center',
            slotName:'weight_type'
        },
        {
            title: '计费节点',
            dataIndex: 'billing_node',
            align:'center',
            slotName:'billing_node'
        },
        {
            title: '是否默认勾选账单',
            dataIndex: 'is_checked',
            align:'center',
            slotName:'is_checked'
        },
    ])
</script>


<style scoped>
    .scrollbar::-webkit-scrollbar {
        display: none;
    }
</style>

<script> export default { name: 'template:detail' } </script>